<template>
    <div class="modal fade" id="addVisitReview" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          	<div class="modal-header">
            	<h4 class="modal-title" id="myModalLabel">添加置业顾问</h4>
          	</div>
          	<div class="modal-body">
          	 	<div class="form-horizontal clearfix" v-for="(item,index) in arrList" :key="index">
          	 		<div class="form-group  col-sm-6">
	                  <label class="col-sm-5 control-label"><span class="required">*</span>置业顾问{{index+1}}</label>
						<div class="col-sm-7">
							<input type="text" class="form-control" placeholder="请输入内容" v-model="item.name">
						</div>
	                </div>
					<div class="form-group  col-sm-6" style="position:relative">
	                  	<label class="col-sm-5 control-label">联系方式</label>
						<div class="col-sm-7">
							<input type="text" class="form-control" placeholder="请输入号码"  v-model="item.phone">
						</div>
						<span class="view-list-close" @click="delAdviser(index)">X</span>
	                </div>
	            </div>
				<a href="javascript:void(0)" @click="addAdviser" class="property-consultant">+继续添加</a>
          	</div>
          	<div class="modal-footer">
            	<button type="button" class="btn checkedBtn" v-show="btnShow" @click="saveDistribute">确定</button>
				<button type="button" class="btn checkedBtn" v-show="btnShow" @click="closeModal">关闭</button>
          	</div>
        </div>
      </div>
    </div>
</template>

<style>
	.property-consultant{
		color: #f87242;
	}
	.property-consultant:hover,
	.property-consultant:focus {
		 color:#ed3f14;
	}
	.view-list-close{
		cursor: pointer;
		font-weight: bold;
		position: absolute;
		right:10px;
		top: 4px;
    	font-size: 20px;
	}
</style>

<script>
	export default{
		//接收父组件的绑定值
		props: {
			adviserList: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				btnShow: true,
				arrList:[],
				tableData: []
			}
		},
		watch: {
			adviserList (val) {
				this.tableData = val
			}
		},
		methods: {
			delAdviser(index){
				this.arrList.splice(index, 1);
			},
			addAdviser(){
				let flag = this.verification();
				if(flag){
					this.arrList.push({name:"",phone:""})
				}
			},
			verification() {
				if(this.arrList.length>0){
					var isShowBtn=true
					for(var ii=0; ii<this.arrList.length; ii++){
						let item = this.arrList[ii]
						if(!(item.name.trim())){
							layer.msg("姓名不能为空!");
							isShowBtn=false
							break
						} else{
							var phoneReg=/(^((13[0-9])|(15[0-9])|(14[0-9])|(17[0-9])|(18[0-9])|19[0-9])\d{8}$)/
							if (!phoneReg.test(item.phone) && item.phone.trim().length>0) {
								layer.msg("手机号格式错误!");
								isShowBtn=false
								break
							}
							if(item.name.trim().length>15){
								layer.msg("置业顾问名称不能超过15个字符!");
								isShowBtn=false
								break
							}
						}
					}
					return isShowBtn
				}
				
				if(this.arrList.length<1){
					return true;
				}
			},
			saveDistribute() {
				let flag = this.verification();
				// 比较tableData与arrList
				// 剔除重复项目并返回前端
				// arrList 去重
				let tempArrList = [];
				this.arrList.forEach(item => {
					let index = tempArrList.findIndex(i => i.phone === item.phone)
					if(index == -1){
						tempArrList.push(item);
					}
				});
				this.arrList = tempArrList;
				this.tableData.forEach(item => {
					let index = this.arrList.findIndex(i => i.phone === item.phone)
					if(index > -1) {
						this.arrList.splice(index, 1)
					}
				});

				let tempList = []
				tempList = [...this.tableData, ...this.arrList]
				this.tableData = [...tempList]
				this.$emit('outerAdviserListener', this.tableData);
				this.arrList = [];
				$('#addVisitReview').modal('hide')
			},
			closeModal(){
				$('#addVisitReview').modal('hide')
			}
		}
	}
	
</script>